<template>
  <div :style="{ height: nowheight, width: nowwidth }">
    <Echart v-if="chartstau" :options="options" />
    <!-- :height="nowheight"
      :width="nowwidth" -->
  </div>
</template>

<script>
import Echart from "../../baseMain/index.vue";
export default {
  components: {
    Echart,
  },
  props: {
    zhinterval: {
      type: Number,
      default: 0,
    },
    zhrotate: {
      type: String,
      default: () => "0",
    },
    isshowleg: {
      type: Boolean,
      default: () => false,
    },
    nowwidth: {
      type: String,
      default: () => "300px",
    },
    nowheight: {
      type: String,
      default: () => "200px",
    },
    bottom: {
      type: String,
      default: () => "",
    },
    cdata: {
      type: Object,
      default: () => ({}),
    },
    fontcolor: {
      type: String,
      default: () => "#fff",
    },
    fontSize: {
      type: Number,
      default: () => 18,
    },
  },
  data() {
    return {
      chartstau: true,
      options: {},
    };
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          //   title: {
          //     text: newData.title,
          //     textStyle: {
          //         color:'#fff',
          //         fontSize:'12',
          //     },
          //     left: 'center'
          //   },
          color: [
            "#5B8FF9",
            "#5AD8A6",
            "#F6BD16",
            "#ffdb5c",
            "#ff9f7f",
            "#32c5e9",
            "#fb7293",
            "#e7bcf3",
          ],
          // tooltip: {
          //   trigger: "axis"
          // },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            show: true, // 是否显示
            trigger: "axis", // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
            axisPointer: {
              // 坐标轴指示器配置项。
              type: "line", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
              axis: "auto", // 指示器的坐标轴。
              snap: true, // 坐标轴指示器是否自动吸附到点上
            },
            // showContent: true, //是否显示提示框浮层，默认显示。
            // triggerOn: 'mouseover', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。
            // enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
            renderMode: "html", // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
            confine: true,
            backgroundColor: "rgba(50,50,50,0)", // 提示框浮层的背景颜色。
            borderColor: "#333", // 提示框浮层的边框颜色。
            borderWidth: 0, // 提示框浮层的边框宽。
            padding: 5, // 提示框浮层内边距，
            textStyle: {
              // 提示框浮层的文本样式。
              color: "#fff",
              fontStyle: "normal",
              fontWeight: "normal",
              fontFamily: "sans-serif",
              fontSize: 14,
            },
            formatter: function (params) {
              var relVal = params[0].name + "<br/>";
              let unitName = "";
              console.log(params[0].marker);
              if (newData.unitName !== undefined) {
                unitName = newData.unitName || "";
              }
              for (var i = 0, l = params.length; i < l; i++) {
                relVal +=
                  params[i].marker +
                    "产量(斤)" +
                    " : " +
                    params[i].value +
                    "<br/>" +
                    "" +
                    unitName || "";
              }
              // console.log(relVal)
              return relVal;
            },
          },
          toolbox: {
            show: true,
            showTitle: true,
          },
          grid: {
            left: "1%",
            right: "5%",
            bottom: this.bottom || "20",
            top: "30%",
            containLabel: true,
          },
          xAxis: {
            name: "月份",
            nameTextStyle: {
              color: "#fff",
              fontSize: 16,
            },
            type: "category",
            // boundaryGap: false,
            boundaryGap: true,
            data: newData.xAxisdata,
            axisLabel: {
              showMinLabel: false,
              showMaxLabel: false,
              interval: this.zhinterval,
              rotate: this.zhrotate,
              margin: 10,
              fontSize: this.fontSize,
              color: this.fontcolor,
            },
            axisTick: {
              alignWithLabel: true,
            },
          },
          yAxis: [
            {
              position: "left",
              type: "value",
              axisLabel: {
                fontSize: 10,
                color: this.fontcolor,
              },
              minInterval: 1,
              min: 0,
              name: "产量(单位/斤)",
              nameTextStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
          ],
          calculable: true,
          legend: {
            show: this.isshowleg,
            // orient: "horizontal",
            // icon: "circle",
            bottom: 0,
            x: "center",
            data: newData.xData,
            // axisLabel: {
            //   color: "#fff"
            // }
            // selected: true
            // textStyle: {
            //   color: "#fff"
            // }
          },
          series: newData.seriesData,
        };
      },
      immediate: true,
      deep: true,
    },
    // 应为最内层的高度固定为百分之百，所以写这里
    nowheight: {
      handler(e) {
        this.nowheights = e;
        this.resetsty();
      },
      deep: true,
    },
  },
  methods: {
    // 重置样式
    resetsty() {
      // alert("jkjk")
      this.chartstau = false;
      this.$nextTick(() => {
        this.chartstau = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
